<template>
  <view :class="['body', now == 4 ? 'paddingBottom' : '']">
    <view class="top_info">
      <view class="title">{{ state.questionInfo.questionnaireName }}</view>
      <view class="label">
        <img class="label_img" src="@/static/image/shield.png" />
        <text>专业测评量表</text>
      </view>
    </view>
    <view class="question_body">
      <view class="question_num">
        <text>第{{ now + 1 }}题</text>
        <text>/共{{ state.questionList.length }}题</text>
      </view>
      <view class="remind">请根据实际情况,选择最符合的一项</view>
      <view v-if="state.questionList.length > 0">
        <view class="topic_title">
          {{ state.questionList[now].questionName }}
        </view>
        <view class="topics">
          <view
            v-for="(item, index) of state.questionList[now].options"
            :key="index"
            :class="['topic', state.questionList[now].option === item.id ? 'active' : '']"
            @tap="answerSelect(item)"
            >{{ item.label }}</view
          >
        </view>
      </view>
    </view>
    <view class="bottom">
      <view @tap="prev" :class="['prev', now == 0 ? 'hidden' : '']">上一题</view>
      <view
        v-if="state.questionList[now].option != '' && now + 1 != state.questionList.length"
        @tap="next"
        class="next"
        >下一题</view
      >
      <view
        v-if="now == state.questionList.length - 1 && state.questionList[now].value !== ''"
        @tap="submit"
        class="next"
        >提交问卷</view
      >
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { weight_info_question, weight_save } from '@/api/questionaire'
import { ref, reactive, computed } from 'vue'
import { debounce, throttle, deepCopy } from '@/utils/tools'
import { formatDate } from '@/utils/util'
import store from '@/store'

const type = ref('')

const state = reactive({
  questionList: [],
  questionInfo: {}
})
const now = ref(0)
const userInfo = ref({})

let currentId = ''

onLoad((option: any) => {
  type.value = option ? option.type : ''
})

onShow(() => {
  userInfo.value = JSON.parse(uni.getStorageSync('userInfo'))
  if (!currentId || currentId !== userInfo.value.patientInfo.empi) {
    currentId = deepCopy(userInfo.value.patientInfo.empi)
    // currentId = '74567895'
    init()
  }
})

const init = () => {
  weight_info_question({ id: type.value }).then((res) => {
    state.questionList = JSON.parse(res.data.content)[0].list
    state.questionInfo = res.data
    state.questionList.forEach((item: any) => {
      item.option = ''
      item.score = 0
    })
  })
}

const answerSelect = throttle((item: any) => {
  // 单选情况
  state.questionList[now.value].value = item.value
  state.questionList[now.value].option = item.id
  state.questionList[now.value].score = item.score
  if (now.value + 1 < state.questionList.length) {
    setTimeout(() => {
      next()
    }, 500)
  }
}, 500)
const prev = () => {
  now.value -= 1
}
const next = () => {
  now.value += 1
}

const submit = () => {
  const params = {
    clientId: type.value,
    patientQuestionnaireAnswerVOs: []
  }
  state.questionList.forEach((item: any) => {
    const answer = {
      id: state.questionInfo.id,
      userId: userInfo.value.userId,
      empi: currentId,
      creator: '',
      createTime: state.questionInfo.createTime,
      updateTime: formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss'),
      questionnaireId: state.questionInfo.questionnaireId,
      questionId: item.id,
      questionnaireRecordId: state.questionInfo.questionnaireId,
      option: item.questionType == '单选' || item.questionType == '多选' ? item.option : '',
      content: item.questionType == '输入' ? item.inputText : item.value,
      extContent: item.questionType == '选择 + 输入' ? item.inputText : '',
      score: item.score
    }
    params.patientQuestionnaireAnswerVOs.push(answer)
  })
  uni.showLoading({
    title: '正在提交中...',
    mask: true
  })
  weight_save(params).then((res) => {
    if (res.code == 0) {
      uni.hideLoading()
      uni.showToast({
        title: '问卷提交成功，正在评估自测结果。',
        icon: 'none',
        duration: 2000,
        success: () => {
          setTimeout(() => {
            uni.redirectTo({
              url: '/packA/pages/psychology/result?type=' + type.value + '&id=' + res.data
            })
          }, 2000)
        }
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.body {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  overflow: auto;

  .top_info {
    position: relative;
    height: 512rpx;
    padding: 48rpx 32rpx;
    background: linear-gradient(180deg, rgb(172 235 242 / 28%) 0%, #f3f7f8 100%);

    .title {
      position: relative;
      z-index: 2;
      margin-bottom: 24rpx;
      font-size: 48rpx;
      font-weight: 700;
      color: #222;
    }

    .label {
      position: relative;
      z-index: 2;
      display: inline-block;
      padding: 10rpx 32rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #fff;
      background: #00d1b6;
      border: 1rpx solid #00d1b6;
      border-radius: 28rpx;

      .label_img {
        width: 28rpx;
        height: 28rpx;
        margin-right: 8rpx;
        transform: translateY(4rpx);
      }
    }
  }

  .question_body {
    position: relative;
    z-index: 2;
    padding: 32rpx;
    margin: 0 32rpx;
    margin-top: -286rpx;
    font-size: 28rpx;
    background: #fff;
    border-radius: 16rpx;

    .question_num {
      font-weight: 700;
      color: #222;
    }

    .remind {
      margin-top: 16rpx;
      font-weight: 400;
      color: #999;
    }

    .cell {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 108rpx;
      border-bottom: 1rpx solid #e5e6eb;

      .left {
        font-size: 30rpx;
        font-weight: 700;
        color: #222;
      }

      .right {
        display: flex;
        gap: 24rpx;
        justify-content: flex-end;
        font-size: 30rpx;
        font-weight: 400;
        color: #222;

        .form_input {
          text-align: right;
        }

        text {
          display: inline-block;
          width: 42rpx;
          text-align: left;
        }
      }
    }

    .topic_title {
      margin-top: 40rpx;
      font-size: 32rpx;
      font-weight: 700;
      color: #222;
    }

    .topics {
      margin-top: 40rpx;

      .topic {
        width: 630rpx;
        height: 88rpx;
        padding-left: 32rpx;
        margin-bottom: 24rpx;
        font-size: 30rpx;
        font-weight: 400;
        line-height: 88rpx;
        text-align: left;
        background: #fafafa;
        border-radius: 8rpx;
      }

      .active {
        color: #00d1b6;
        background: rgb(0 209 182 / 5%);
        border: 1rpx solid #00d1b6;
      }

      .disabled {
        color: #ccc;
        background: #f5f5f5;
        border: 1rpx solid #e5e6eb;
      }
    }
  }

  .bottom {
    display: flex;
    gap: 26rpx;
    justify-content: space-between;
    margin: 32rpx;
    font-size: 32rpx;
    font-weight: 700;

    .prev,
    .next {
      width: 48%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      border-radius: 44rpx;
    }

    .prev {
      color: #00d1b6;
      border: 1rpx solid #00d1b6;
    }

    .next {
      color: #fff;
      background: #00d1b6;
    }

    .hidden {
      visibility: hidden;
    }
  }
}

.paddingBottom {
  padding-bottom: 184rpx;
}
</style>
